<template>
    <div class="question">
        <div class="main">
            <el-card shadow="always" class="Card">
                <div class="cardtitle">小程序端问卷调查</div>
                <div class="cardtext">上传问卷星小程序生成的问卷网址和二维码图片</div>
            </el-card>
            <el-card shadow="always" class="Card">
                <div class="upload">
                    <div class="titleWrap">
                        <div class="cardtext">问卷网址</div>
                        <el-input v-model="questionnaireURL" placeholder="输入网址，例如：https://www.scau.edu.cn/" />
                    </div>
                    <div class="uploadWrap">
                          <el-upload
                            ref="upload"
                            class="upload-demo"
                            drag
                            multiple
                            accept=".jpg,.jpeg,.png,.tiff "
                            :auto-upload="false"
                            :fileList="fileList"
                        >
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                            &emsp;&emsp;拖拽上传&emsp;&emsp;或&emsp;&emsp;<em>点击上传</em>&emsp;&emsp;
                            </div>
                            <template #tip>
                            <div class="el-upload__tip">
                                格式为：.jpg .jpeg .png .tiff
                            </div>
                            </template>
                        </el-upload>
                    </div>
                    <div class="buttonWrap">
                        <el-button type="primary" @click="submit">提交</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import {send} from "@/network/send";
import {messageElMessage} from "@/utils/tips";

export default {
  name: "QuestionNaire",
  data() {
    return {
      questionnaireURL: null,
      fileList: []
    }
  },
  methods: {
    submit() {
      if (!this.questionnaireURL || !this.fileList.length) {
        messageElMessage("请填写问卷网址或上传二维码", 'warning')
        return
      }
      // 将数据加载为FormData格式
      let uploadData = new FormData()
      this.fileList.forEach(file => {
        uploadData.append('picture', file.raw, file.raw.name)
      })
      uploadData.append('title', this.questionnaireURL)
      uploadData.append('type', 2)
      // 传输数据
      send(uploadData)
          .then(res => {
            // 上传失败
            if (res.data.status !== 1) {
              messageElMessage("发布问卷失败", 'error')
              return
            }
            // 置空准备上传的文件
            this.fileList = []
            this.$refs.upload.clearFiles()
            //  清除问卷网址
            this.questionnaireURL = null
            // 上传成功
            messageElMessage("发布问卷成功", 'success')
          })
          .catch(() => {
            messageElMessage('上传数据失败', 'error')
          })
    },
    reset() {
      this.questionnaireURL = null
      this.fileList = []
      this.$ref.upload.clearFiles()
    }
  }

}
</script>

<style scoped>
.question{
  position: absolute;
  left: 12%;
  top: 6%;
  width: 88%;
  height: 94%;
  background-color: rgb(245, 245, 245);
}
.main{
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.Card{
  margin: 20px;
  width: 95%;
  display: flex;
  align-items: center;
}
.cardtitle{
  width: 130px;
  margin: 10px;
}
.cardtext{
  width: 320px;
  font-size: 14px;
  color: rgb(125, 125, 125);
}
.upload{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.titleWrap{
    margin: 20px;
    display: flex;
    align-items: center;
}
.uploadWrap{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20px;
}
.buttonWrap{
    margin: 20px;
}
</style>